<!-- 服务--下单页 -->
<template>
    <div>
        <el-descriptions
        class="margin-top"
        title="订单详情"
        :column="1"
        size="medium"
        border="true"
        style="font-size: 30px;"
      >
      <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-s-order"></i>
            金额
          </template>
          {{ list.orderTotalAmount }}元
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-s-promotion"></i>
            当前状态
          </template>
          {{ status }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-watch"></i>
            下单时间
          </template>
          {{ time }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-sold-out"></i>
            交易商品
          </template>
          {{ list.orderName }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-s-shop"></i>
            商户全称
          </template>
          {{ list.orderMerchatName }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            下单人
          </template>
          {{ userName }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-office-building"></i>
            收单机构
          </template>
          {{ list.acquirer }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-connection"></i>
            交易单号
          </template>
          {{ list.orderNumber }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-takeaway-box"></i>
            商品单号
          </template>
          可在支持的商户扫码退款
        </el-descriptions-item>
          
      </el-descriptions>
      <div style="margin-top: 20px;margin-left: 40%;">
        <el-button type="primary" size="medium" style="font-size: 30px;" @click="back2Home()">返回首页</el-button>
        <el-button v-if="flagPay" type="success" size="medium" style="font-size: 30px;" @click="pay()">继续支付</el-button>
      </div>
    </div>
</template>

<script>
export default{
    name:"orderinner",
    props:{
        orderId:Number
    },
    data() {
        return {
            // 结果集
            list:{},
            time:"",
            // 其他参数
            userName:localStorage.getItem("USERNAME"),
            status:"下单成功，待支付",
            flagPay:true,
        }
    },
    methods:{
        // 订单列表查询
        queryById(){
            this.$api.ordersApi.queryById({orderId:this.orderId}).then(res=>{
                this.list = res.data.data;
                this.time = res.data.map.formattedTime;
            })
        },
        //返回首页
        back2Home(){
            this.$router.push({name:"home"})
        },
        // 完成支付
        pay(){
            this.$api.ordersApi.completePayment({orderId:this.list.orderId}).then(res=>{
                if(res.data.code == 0)alert("支付失败！");
                else{
                    alert("支付成功！");
                    this.status = "支付成功";
                    this.flagPay = false;
                }
            })
        },
    },
    mounted() {
        this.queryById();
    },
}
</script>